<template>
  <n-alert title="捐赠" type="info">
    <div style="margin: 20px">
      <n-h3
        >开源不易，Vue Admin Work 系列中已经有如下<strong
          style="color: red; margin: 0 10px"
          >{{ projectList.length }}</strong
        >款作品。项目具体信息如下：</n-h3
      >
      <n-ul>
        <n-li v-for="(item, index) of projectList" :key="index">
          <div style="margin: 20px 0; display: flex">
            <span v-html="item.des"></span>
            <n-space>
              <n-tag
                v-for="(tagItem, i) of item.items"
                size="small"
                :key="i"
                type="success"
                >{{ tagItem }}</n-tag
              >
            </n-space>
          </div>
          <n-space>
            <n-a :href="item.preview" target="_blank"> 预览地址 </n-a>
            <n-a :href="item.github" target="_blank">
              {{ item.githubTip }}
            </n-a>
            <n-a :href="item.gitee" target="_blank">
              {{ item.giteeTip }}
            </n-a>
          </n-space>
        </n-li>
      </n-ul>
      <n-text type="info">
        大家可以根据的喜好下载，无论是日常学习还是平时工作中都可以帮助到您
      </n-text>
      <br />
      <n-text type="success">
        要研发和维护这些框架，是一件非常管繁琐的事，如果您认为 Vue Admin Work
        帮到了您的开发工作，您可以捐赠我们，金额不限，哪怕是一杯咖啡也好。
      </n-text>
    </div>
    <n-space justify="start" :wrap="false" :vertical="vertical">
      <n-card hoverable>
        <img
          style="width: 100%; height: 180px; border: 2px solid #a5cbf9"
          :src="AliImg"
        />
      </n-card>
      <n-card hoverable>
        <img
          style="width: 100%; height: 180px; border: 2px solid #58a367"
          :src="WeChatImg"
        />
      </n-card>
    </n-space>
  </n-alert>
</template>

<script lang="ts" setup>
import {
  NSpace,
  NAlert,
  NCard,
  NUl,
  NLi,
  NA,
  NText,
  NH3,
  NTag,
} from "naive-ui";
import { reactive, ref } from "vue";
import AliImg from "../assets/ali.png";
import WeChatImg from "../assets/wechat.png";
const vertical = ref(document.body.clientWidth < 500);
window.onresize = () => {
  vertical.value = document.body.clientWidth < 500;
};
const projectList = reactive([
  {
    des: "<strong style='color: var(--color-target)'>Vue Admin Work P</strong>版采用的技术方案是：",
    preview: "http://qingqingxuan.gitee.io/vue-admin-work-p",
    githubTip: "请点击下方微信按钮进行客服授权",
    items: ["Vue3", "Typescript", "Vite2", "Naive UI"],
  },
  {
    des: "<strong style='color: var(--color-target)'>Vue Admin Work A</strong>版采用的技术方案是：",
    preview: "http://qingqingxuan.gitee.io/vue-admin-work-a",
    githubTip: "请点击下方微信按钮进行客服授权",
    items: ["Vue3", "Typescript", "Vite2", "Antd"],
  },
  {
    des: "<strong style='color: var(--color-target)'>Arco Admin</strong>版采用的技术方案是：",
    preview: "http://qingqingxuan.gitee.io/arco-admin",
    githubTip: "请点击下方微信按钮进行客服授权",
    items: ["Vue3", "Typescript", "Vite2", "ArcoDesign"],
  },
  {
    des: "<strong style='color: var(--color-target)'>Admin Work</strong>版采用的技术方案是：",
    preview: "http://qingqingxuan.gitee.io/admin-work",
    github: "https://github.com/qingqingxuan/admin-work",
    gitee: "https://gitee.com/qingqingxuan/admin-work",
    githubTip: "github源码地址",
    giteeTip: "gitee源码地址",
    items: ["Vue3", "Typescript", "Vite2", "Naive UI"],
  },
  {
    des: "<strong style='color: var(--color-target)'>Vue Admin Work</strong>版采用的技术方案是：",
    preview: "http://qingqingxuan.gitee.io/vue-admin-work",
    github: "https://github.com/qingqingxuan/vue-admin-work",
    gitee: "https://gitee.com/qingqingxuan/vue-admin-work",
    githubTip: "github源码地址",
    giteeTip: "gitee源码地址",
    items: ["Vue2", "Javascript", "Webpack", "Element UI"],
  },
  {
    des: "<strong style='color: var(--color-target)'>Vue Admin Work X</strong>版采用的技术方案是：",
    preview: "http://qingqingxuan.gitee.io/vue-admin-work-x",
    github: "https://github.com/qingqingxuan/vue-admin-work-x",
    gitee: "https://gitee.com/qingqingxuan/vue-admin-work-x",
    githubTip: "github源码地址",
    giteeTip: "gitee源码地址",
    items: ["Vue3", "Typescript", "Webpack", "Element Plus"],
  },
]);
</script>
